<template>
  <div class="title">
    <div class="head">
      <div class="circle">
        <img src="@/assets/images/Home/bgi.png" alt="">
      </div>
      <div class="btm">
        <div class="card">
          <van-swipe :autoplay="3000" indicator-color="white">
            <van-swipe-item>
              <img src="@/assets/images/Home/banner.jpg" alt="">
            </van-swipe-item>
            <van-swipe-item>
              <img src="@/assets/images/Home/banner-2.jpg" alt="">
            </van-swipe-item>
            <van-swipe-item>
              <img src="@/assets/images/Home/banner-3.jpg" alt="">
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
    </div>
  </div>
  <van-sticky>
  <div class="info">
    <div class="one">
      <div class="top">
            <span>
              <van-icon name="location-o" />
            </span>
        <span>
              {{city}}
            </span>
      </div>
      <div class="date">
            <span>
              {{formattedDate}}
            </span>
        <span>
              {{weatherRes.text_day}}
            </span>
        <span>
              {{weatherRes.low}}/{{weatherRes.high}}℃
            </span>
      </div>
    </div>
  </div>
  </van-sticky>
</template>

<script setup>
import {getWeather, getPosition} from "@/api/api"
import {onMounted, reactive, ref} from "vue"
import {pinyin} from "pinyin-pro"
// 天气
// let weatherRes = reactive({})
let weatherRes = reactive({
  date:'2024-01-10',
  high:"-2",
  low:'-18',
  text_day:'晴'
})
const city = ref('沈阳')
const formattedDate = ref()

onMounted(()=>{
  getDay()
  // getUserPosition()
})

// 获取到天气
const getHomeWeather = async (data) => {
  const w = await getWeather(data)
  if(w){
    weatherRes = w.data.results[0].daily[0]
    console.log(weatherRes)
    console.log(city.value)
  }
}

const getDay = () => {
  const currentDate = new Date()

  // 获取年、月、日
  const year = currentDate.getFullYear()
  const month = (currentDate.getMonth() + 1).toString()
  const day = currentDate.getDate().toString()

  // 拼接成 yyyy-mm-dd 格式
  formattedDate.value = `${year}年${month}月${day}日`
}

const getUserPosition = async () => {
  const res = await getPosition()
  if(res){
    city.value = res.ad_info.city
    const tar = pinyin(city.value)
    if(tar){
      const w = await getHomeWeather({city:tar})
    }
  }
}
</script>

<style scoped lang="less">
.title{
  height: 580px;
  width: 100%;
  background-color: white;
  .head{
    .circle{
      img{
        height: 350px;
        width: 100%;
      }
    }
    .btm{
      width: 100%;
      margin: -150px auto 0 auto;
      .card{
        //margin: 0 0 0 13px;
        margin: 0 auto;
        height: 300px;
        width: 690px;
        border-radius: 20px;
        z-index: 999;
        background-repeat: no-repeat;
        overflow: hidden;
        box-shadow: 0px 4px 5vw #888888;
        img{
          height: 300px;
          width: 690px;
        }
      }
    }
  }
}
.info{
  position: absolute;
  top: 0;
  left: 0;
  width: 99%;
  height: 180px;
  background-color: #1dcf91;
  padding-top: 30px;
  padding-left: 25px;
  box-sizing: border-box;
  .one{
    display: flex;
    justify-content: space-between;
    width: 94%;
    padding-right: 30px;
    .top{
      color: white;
      letter-spacing: 5px;
      font-size: 33px;
      display: flex;
      width: 120px;
      justify-content: space-between;
      line-height: 160px;
    }
    .date{
      margin-right: 10px;
      display: flex;
      width: 450px;
      color: white;
      height: 80px;
      line-height: 160px;
      font-size: 33px;
      span{
        margin-left: 22px;
      }
    }
  }
}
</style>